<!DOCTYPE html>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<html>
<head>
    <!-- Required meta tags always come first -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <link rel="stylesheet" href="/bootstrap4b2/css/bootstrap.css">
    <link rel="stylesheet" href="/custom/bookmark.css">
    <link rel="stylesheet" href="/zTree_v3-master/css/zTreeStyle/zTreeStyle.css" type="text/css">
    <style type="text/css">
        .ztree * {font-size: 10pt;font-family:"Microsoft Yahei",Verdana,Simsun,"Segoe UI Web Light","Segoe UI Light","Segoe UI Web Regular","Segoe UI","Segoe UI Symbol","Helvetica Neue",Arial}
        .ztree li ul{ margin:0; padding:0}
        .ztree li {line-height:20px;}
        .ztree li a {width:200px;height:20px;padding-top: 0px;}
        .ztree li a:hover {text-decoration:none; background-color: #E7E7E7;}
        .ztree li a span.button.switch {visibility:hidden}
        .ztree.showIcon li a span.button.switch {visibility:visible}
        .ztree li a.curSelectedNode {background-color:#D4D4D4;border:0;height:20px;}
        .ztree li span {line-height:20px;}
        .ztree li span.button {margin-top: -7px;}
        .ztree li span.button.switch {width: 16px;height: 16px;}

        .ztree li a.level0 span {font-size: 100%;font-weight: bold;}
        .ztree li span.button {background-image:url("/zTree_v3-master/left_menuForOutLook.png"); *background-image:url("/zTree_v3-master/left_menuForOutLook.gif")}
        .ztree li span.button.switch.level0 {width: 20px; height:20px}
        .ztree li span.button.switch.level1 {width: 20px; height:20px}
        .ztree li span.button.noline_open {background-position: 0 0;}
        .ztree li span.button.noline_close {background-position: -18px 0;}
        .ztree li span.button.noline_open.level0 {background-position: 0 -18px;}
        .ztree li span.button.noline_close.level0 {background-position: -18px -18px;}
    </style>
    <title>在线书签</title>
</head>

<body>

<header>
    <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
        <a class="navbar-brand" href="#">Dashboard</a>
        <button class="navbar-toggler d-lg-none" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarsExampleDefault">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item active">
                    <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Settings</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Profile</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Help</a>
                </li>
            </ul>
            <form class="form-inline mt-2 mt-md-0">
                <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
                <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
            </form>
        </div>
    </nav>
</header>

<div class="container-fluid">
    <div class="row">
        <nav class="col-sm-3 col-md-2 d-none d-sm-block bg-light sidebar">
            <ul id="tree" class="ztree nav nav-pills flex-column"></ul>


            <ul class="nav nav-pills flex-column">
                <li class="nav-item">
                    <a class="nav-link" href="#">Nav item again111111111</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">One more nav</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Another nav item</a>
                </li>
            </ul>

        </nav>

        <!-- 右边主题部分-->
        <main role="main" class="col-sm-9 ml-sm-auto col-md-10 pt-3">
            <h1>Dashboard</h1>

            ...

            <c:url value="/resources/text.txt" var="url"/>
            <spring:url value="/resources/text.txt" htmlEscape="true" var="springUrl" />
            Spring URL: ${springUrl} at ${time}
            <br>
            JSTL URL: ${url}中文支持吗
            <br>
            Message: ${message}
            <h1>Hello, world!</h1>


        </main>
    </div>
</div>

<%--<script src="http://ajax.useso.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>--%>
<%--<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>--%>
<script src="http://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>
<script src="/bootstrap4b2/js/bootstrap.min.js"></script>
<script src="/zTree_v3-master/js/jquery.ztree.core.js" type="text/javascript" ></script>
<script src="/zTree_v3-master/js/jquery.ztree.exedit.js" type="text/javascript" ></script>
<SCRIPT type="text/javascript" >
    <!--
    var zTree;
    var demoIframe;
    var setting = {
        view: {
            showLine: false,
            showIcon: false,
            selectedMulti: false,
            dblClickExpand: false,
            addDiyDom: addDiyDom
        },
        data: {
            simpleData: {
                enable: true
            }
        },
        callback: {
            beforeClick: beforeClick
        }
        /*
         data: {
         simpleData: {
         enable:true,
         idKey: "id",
         pIdKey: "pId",
         rootPId: ""
         }
         },
         callback: {
         beforeClick: function(treeId, treeNode) {
         var zTree = $.fn.zTree.getZTreeObj("tree");
         if (treeNode.isParent) {
         zTree.expandNode(treeNode);
         return false;
         } else {
         demoIframe.attr("src",treeNode.file + ".html" );
         return true;
         }
         }
         }*/
    };
    var zNodes =[
        {id:1, pId:0, name:"[core] 基本功能 演示", open:true},
        {id:101, pId:1, name:"最简单的树 --  标准 JSON 数据", file:"zTree_v3-master/demo/cn/core/standardData"},
        {id:102, pId:1, name:"最简单的树 --  简单 JSON 数据", file:"zTree_v3-master/demo/cn/core/simpleData"},
        {id:103, pId:1, name:"不显示 连接线", file:"zTree_v3-master/demo/cn/core/noline"},
        {id:104, pId:1, name:"不显示 节点 图标", file:"zTree_v3-master/demo/cn/core/noicon"},
        {id:105, pId:1, name:"自定义图标 --  icon 属性", file:"zTree_v3-master/demo/cn/core/custom_icon"},
        {id:106, pId:1, name:"自定义图标 --  iconSkin 属性", file:"zTree_v3-master/demo/cn/core/custom_iconSkin"},
        {id:107, pId:1, name:"自定义字体", file:"zTree_v3-master/demo/cn/core/custom_font"},
        {id:115, pId:1, name:"超链接演示", file:"zTree_v3-master/demo/cn/core/url"},
        {id:108, pId:1, name:"异步加载 节点数据", file:"zTree_v3-master/demo/cn/core/async"},
        {id:109, pId:1, name:"用 zTree 方法 异步加载 节点数据", file:"zTree_v3-master/demo/cn/core/async_fun"},
        {id:110, pId:1, name:"用 zTree 方法 更新 节点数据", file:"zTree_v3-master/demo/cn/core/update_fun"},
        {id:111, pId:1, name:"单击 节点 控制", file:"zTree_v3-master/demo/cn/core/click"},
        {id:112, pId:1, name:"展开 / 折叠 父节点 控制", file:"zTree_v3-master/demo/cn/core/expand"},
        {id:113, pId:1, name:"根据 参数 查找 节点", file:"zTree_v3-master/demo/cn/core/searchNodes"},
        {id:114, pId:1, name:"其他 鼠标 事件监听", file:"zTree_v3-master/demo/cn/core/otherMouse"},
        {id:115, pId:114, name:"百度", file:"zTree_v3-master/demo/cn/http://www.baidu.com/"},
        {id:116, pId:114, name:"百度", file:"zTree_v3-master/demo/cn/http://www.baidu.com/"},
        {id:117, pId:116, name:"百度", file:"zTree_v3-master/demo/cn/http://www.baidu.com/"},
        {id:118, pId:116, name:"百度", file:"zTree_v3-master/demo/cn/http://www.baidu.com/"},
        {id:119, pId:116, name:"百度", file:"zTree_v3-master/demo/cn/http://www.baidu.com/"},
        {id:2, pId:0, name:"[excheck] 复/单选框功能 演示", open:true},
        {id:201, pId:2, name:"Checkbox 勾选操作", file:"zTree_v3-master/demo/cn/excheck/checkbox"},
        {id:206, pId:2, name:"Checkbox nocheck 演示", file:"zTree_v3-master/demo/cn/excheck/checkbox_nocheck"},
        {id:207, pId:2, name:"Checkbox chkDisabled 演示", file:"zTree_v3-master/demo/cn/excheck/checkbox_chkDisabled"},
        {id:208, pId:2, name:"Checkbox halfCheck 演示", file:"zTree_v3-master/demo/cn/excheck/checkbox_halfCheck"},
        {id:202, pId:2, name:"Checkbox 勾选统计", file:"zTree_v3-master/demo/cn/excheck/checkbox_count"},
        {id:203, pId:2, name:"用 zTree 方法 勾选 Checkbox", file:"zTree_v3-master/demo/cn/excheck/checkbox_fun"},
        {id:204, pId:2, name:"Radio 勾选操作", file:"zTree_v3-master/demo/cn/excheck/radio"},
        {id:209, pId:2, name:"Radio nocheck 演示", file:"zTree_v3-master/demo/cn/excheck/radio_nocheck"},
        {id:210, pId:2, name:"Radio chkDisabled 演示", file:"zTree_v3-master/demo/cn/excheck/radio_chkDisabled"},
        {id:211, pId:2, name:"Radio halfCheck 演示", file:"zTree_v3-master/demo/cn/excheck/radio_halfCheck"},
        {id:205, pId:2, name:"用 zTree 方法 勾选 Radio", file:"zTree_v3-master/demo/cn/excheck/radio_fun"},
        {id:3, pId:0, name:"[exedit] 编辑功能 演示", open:false},
        {id:301, pId:3, name:"拖拽 节点 基本控制", file:"zTree_v3-master/demo/cn/exedit/drag"},
        {id:302, pId:3, name:"拖拽 节点 高级控制", file:"zTree_v3-master/demo/cn/exedit/drag_super"},
        {id:303, pId:3, name:"用 zTree 方法 移动 / 复制 节点", file:"zTree_v3-master/demo/cn/exedit/drag_fun"},
        {id:304, pId:3, name:"基本 增 / 删 / 改 节点", file:"zTree_v3-master/demo/cn/exedit/edit"},
        {id:305, pId:3, name:"高级 增 / 删 / 改 节点", file:"zTree_v3-master/demo/cn/exedit/edit_super"},
        {id:306, pId:3, name:"用 zTree 方法 增 / 删 / 改 节点", file:"zTree_v3-master/demo/cn/exedit/edit_fun"},
        {id:307, pId:3, name:"异步加载 & 编辑功能 共存", file:"zTree_v3-master/demo/cn/exedit/async_edit"},
        {id:308, pId:3, name:"多棵树之间 的 数据交互", file:"zTree_v3-master/demo/cn/exedit/multiTree"},
        {id:4, pId:0, name:"大数据量 演示", open:false},
        {id:401, pId:4, name:"一次性加载大数据量", file:"zTree_v3-master/demo/cn/bigdata/common"},
        {id:402, pId:4, name:"分批异步加载大数据量", file:"zTree_v3-master/demo/cn/bigdata/diy_async"},
        {id:403, pId:4, name:"分批异步加载大数据量", file:"zTree_v3-master/demo/cn/bigdata/page"},
        {id:5, pId:0, name:"组合功能 演示", open:false},
        {id:501, pId:5, name:"冻结根节点", file:"zTree_v3-master/demo/cn/super/oneroot"},
        {id:502, pId:5, name:"单击展开/折叠节点", file:"zTree_v3-master/demo/cn/super/oneclick"},
        {id:503, pId:5, name:"保持展开单一路径", file:"zTree_v3-master/demo/cn/super/singlepath"},
        {id:504, pId:5, name:"添加 自定义控件", file:"zTree_v3-master/demo/cn/super/diydom"},
        {id:505, pId:5, name:"checkbox / radio 共存", file:"zTree_v3-master/demo/cn/super/checkbox_radio"},
        {id:506, pId:5, name:"左侧菜单", file:"zTree_v3-master/demo/cn/super/left_menu"},
        {id:513, pId:5, name:"OutLook 风格", file:"zTree_v3-master/demo/cn/super/left_menuForOutLook"},
        {id:515, pId:5, name:"Awesome 风格", file:"zTree_v3-master/demo/cn/super/awesome"},
        {id:514, pId:5, name:"Metro 风格", file:"zTree_v3-master/demo/cn/super/metro"},
        {id:507, pId:5, name:"下拉菜单", file:"zTree_v3-master/demo/cn/super/select_menu"},
        {id:509, pId:5, name:"带 checkbox 的多选下拉菜单", file:"zTree_v3-master/demo/cn/super/select_menu_checkbox"},
        {id:510, pId:5, name:"带 radio 的单选下拉菜单", file:"zTree_v3-master/demo/cn/super/select_menu_radio"},
        {id:508, pId:5, name:"右键菜单 的 实现", file:"zTree_v3-master/demo/cn/super/rightClickMenu"},
        {id:511, pId:5, name:"与其他 DOM 拖拽互动", file:"zTree_v3-master/demo/cn/super/dragWithOther"},
        {id:512, pId:5, name:"异步加载模式下全部展开", file:"zTree_v3-master/demo/cn/super/asyncForAll"},
        {id:6, pId:0, name:"其他扩展功能 演示", open:false},
        {id:601, pId:6, name:"隐藏普通节点", file:"zTree_v3-master/demo/cn/exhide/common"},
        {id:602, pId:6, name:"配合 checkbox 的隐藏", file:"zTree_v3-master/demo/cn/exhide/checkbox"},
        {id:603, pId:6, name:"配合 radio 的隐藏", file:"zTree_v3-master/demo/cn/exhide/radio"}
    ];
    function addDiyDom(treeId, treeNode) {
        var spaceWidth = 5;
        var switchObj = $("#" + treeNode.tId + "_switch"),
            icoObj = $("#" + treeNode.tId + "_ico");
        switchObj.remove();
        icoObj.before(switchObj);

        if (treeNode.level > 1) {
            var spaceStr = "<span style='display: inline-block;width:" + (spaceWidth * treeNode.level)+ "px'></span>";
            switchObj.before(spaceStr);
        }
    }
    function beforeClick(treeId, treeNode) {
        if (treeNode.level >= 0 ) {
            var zTree = $.fn.zTree.getZTreeObj("tree");
            zTree.expandNode(treeNode);
            //demoIframe.attr("src",treeNode.file + ".html" );
            return false;
        }
        return true;
    }
    $(document).ready(function(){
        var t = $("#tree");
        $.fn.zTree.init(t, setting, zNodes);
        //demoIframe = $("#testIframe");
        //demoIframe.bind("load", loadReady);
        var zTree = $.fn.zTree.getZTreeObj("tree");

        //curMenu = zTree.getNodes()[0].children[0];
        //zTree.selectNode(curMenu);

        t.hover(function () {
            if (!t.hasClass("showIcon")) {
                t.addClass("showIcon");
            }
        }, function() {
            t.removeClass("showIcon");
        });

        zTree.selectNode(zTree.getNodeByParam("id", 101));
    });
    function loadReady() {
        var bodyH = demoIframe.contents().find("body").get(0).scrollHeight,
            htmlH = demoIframe.contents().find("html").get(0).scrollHeight,
            maxH = Math.max(bodyH, htmlH), minH = Math.min(bodyH, htmlH),
            h = demoIframe.height() >= maxH ? minH:maxH ;
        if (h < 530) h = 530;
        demoIframe.height(h);
    }
    //-->
</SCRIPT>
</body>

</html>